<template>
    <div class="chat">
        <header>
            <div class="f-s">
                <img :src="to_user_info.avatar" alt="" class="avatar" v-if='to_user_info && to_user_info.avatar'>
                <span v-if='to_user_info && to_user_info.nickname' style='margin-left :10px'>{{to_user_info.nickname}}</span>
                <!-- <div>
                    订单信息
                </div> -->
            </div>
        </header>
        <div class="message-container" ref='messageContainer'>
            <template v-if='messages && messages.length'>
                <div class="message-item self f-e" 
                    :class ="checkIsSelf(item.send_user_id) ? 'f-e' : 'f-s'"
                    v-for='item in messages'
                    :key='item.id'>
                    <template v-if ='checkIsSelf(item.send_user_id)'>
                       
                        <template v-if='item.img_url'>
                            <img :src="item.img_url" alt="" class="chat-img">
                        </template>
                        <template v-else>
                            <div class="message-content">{{item.content}}</div>
                        </template>
                        <img :src="cur_user_info.avatar" alt="" class="avatar" v-if='cur_user_info && cur_user_info.avatar'>
                    </template>
                    <template v-else>
                        <img :src="to_user_info.avatar" alt="" class="avatar" v-if='to_user_info && to_user_info.avatar'>
                        <template v-if='item.img_url'>
                            <img :src="item.img_url" alt="" class="chat-img">
                        </template>
                        <template v-else>
                            <div class="message-content">{{item.content}}</div>
                        </template>
                    </template>
                    
                </div>

            </template>
        </div>
        <!-- 输入区域 -->
        <div class="input-area">
            <div class="icons">
                <el-upload
                    action="http://otc.xmobject.com/api/utility/upload"
                    :show-file-list="false"
                    :headers='headers'
                    name='img'
                    :data = "{type : 'chat'}"
                    :on-success="handleAvatarSuccess">
                    <i class="el-icon-picture-outline"></i>
                </el-upload>
            </div>
            <div class="s-b input-content">
                <el-input type='textarea' v-model="messageContent"></el-input>
                <el-button type='primary' @click='sendMessage(null)'>發送</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {SendChatMessage, GetChatRecord} from '@/api/chat'
    export default {
        data () {
            return {
                cur_user_info :null,
                to_user_info :null,
                messages : null,
                messageContent :null,
                headers : {
                    "authorization":this.$store.state.userInfo.authorization
                },
                timer :null
            }
        },
        created () {
            this.getChatMessage();

            this.timer = setInterval(_ => {
                this.getChatMessage()
            }, 5 *1000)
            
        },
        destroyed () {
            this.timer = null;
            clearInterval(this.timer)
        },
        methods :{
            checkIsSelf (send_user_id){
                return send_user_id == this.$store.state.userInfo.user_id;
            },
            getChatMessage () {
                GetChatRecord({
                    trade_id : this.$route.params.id,
                    ad_id : this.$route.params.ad_id
                }).then(res =>{
                    this.cur_user_info = res.result.cur_user_info;
                    this.to_user_info = res.result.to_user_info;
                    this.messages = res.result.chat_list;
                    // console.log(this.cur_user_info, this.to_user_info)
                    this.$nextTick(_ => {
                        this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight
                    })
                })
            },
            handleAvatarSuccess (response) {
                if (response.code == 200) {
                    console.log(response)
                    this.sendMessage(response.result.filename, response.result.host)
                }
            },
            //发送消息
            sendMessage (fileName,host) {
                if (!fileName && !this.messageContent) {
                    this.$alert('请输入要发送的内容', '提示');
                    return;
                }
                SendChatMessage({
                    trade_id : this.$route.params.id,
                    ad_id : this.$route.params.ad_id,
                    msg_type : fileName ? 2 : 1,
                    content : this.messageContent,
                    img_url : fileName ? fileName : null
                }).then(res => {
                    
                    let _v = {
                        content :this.messageContent,
                        send_user_id : this.$store.state.userInfo.user_id,
                        img_url : host + fileName
                    }

                    this.messages = this.messages ? this.messages.concat([_v]) : [_v];
                    this.messageContent = null;


                    this.$nextTick(_ => {
                        this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight
                    })
                    

                })
            }
        }
        
    }
</script>

<style lang='less' scoed>
    @import url('../../assets/css/_b.less');
    .chat {
        width: 1200px;
        margin: 15px auto;
        background: #fff;
        header {
            background: #d7d7d7;
            padding: 10px;
        }
        .avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        .message-container {
            height: 400px;
            padding: 10px;
            background: #fff;
            overflow-y: scroll;
        }
        .input-area {
           
            border-top: 1px solid #f1f1f1;
            .el-button {
                margin-left: 130px;
            }
        }
        .icons {
            // padding: 10px 50px;
            background: #f1f1f1;
            padding: 8px 12px;
            font-size: 24px;
        }
        .input-content {
            padding: 10px;
        }
        .message-content {
            font-size: 13px;
            background: #7cd37c;
            border-radius: 5px;
            padding: 10px;
            margin: 0 10px;
        }
        .message-item {
            margin-bottom: 10px;
        }
        .chat-img {
            width: 200px;
            margin: 0 10px;
        }
    }
</style>